Android基础
11 分钟 读完 (大约 1590 个字)

《Android 基础（四十一）》 ExpandableListView

1. 简介

看下源码中的英文介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
 * A view that shows items in a vertically scrolling two-level list. This
 * differs from the {@link ListView} by allowing two levels: groups which can
 * individually be expanded to show its children. The items come from the
 * {@link ExpandableListAdapter} associated with this view.
 * <p>
 * Expandable lists are able to show an indicator beside each item to display
 * the item's current state (the states are usually one of expanded group,
 * collapsed group, child, or last child). Use
 * {@link #setChildIndicator(Drawable)} or {@link #setGroupIndicator(Drawable)}
 * (or the corresponding XML attributes) to set these indicators (see the docs
 * for each method to see additional state that each Drawable can have). The
 * default style for an {@link ExpandableListView} provides indicators which
 * will be shown next to Views given to the {@link ExpandableListView}. The
 * layouts android.R.layout.simple_expandable_list_item_1 and
 * android.R.layout.simple_expandable_list_item_2 (which should be used with
 * {@link SimpleCursorTreeAdapter}) contain the preferred position information
 * for indicators.
 * <p>
 * The context menu information set by an {@link ExpandableListView} will be a
 * {@link ExpandableListContextMenuInfo} object with
 * {@link ExpandableListContextMenuInfo#packedPosition} being a packed position
 * that can be used with {@link #getPackedPositionType(long)} and the other
 * similar methods.
 * <p>
 * <em><b>Note:</b></em> You cannot use the value <code>wrap_content</code>
 * for the <code>android:layout_height</code> attribute of a
 * ExpandableListView in XML if the parent's size is also not strictly specified
 * (for example, if the parent were ScrollView you could not specify
 * wrap_content since it also can be any length. However, you can use
 * wrap_content if the ExpandableListView parent has a specific size, such as
 * 100 pixels.
 * 
 * @attr ref android.R.styleable#ExpandableListView_groupIndicator
 * @attr ref android.R.styleable#ExpandableListView_indicatorLeft
 * @attr ref android.R.styleable#ExpandableListView_indicatorRight
 * @attr ref android.R.styleable#ExpandableListView_childIndicator
 * @attr ref android.R.styleable#ExpandableListView_childIndicatorLeft
 * @attr ref android.R.styleable#ExpandableListView_childIndicatorRight
 * @attr ref android.R.styleable#ExpandableListView_childDivider
 * @attr ref android.R.styleable#ExpandableListView_indicatorStart
 * @attr ref android.R.styleable#ExpandableListView_indicatorEnd
 * @attr ref android.R.styleable#ExpandableListView_childIndicatorStart
 * @attr ref android.R.styleable#ExpandableListView_childIndicatorEnd
 */

ExpandableListView是不同于ListView的两级列表View，可以收起可以展开。通过ExpandableListAdapter来配置需要现实的items。

2. 基本使用

2.1 布局文件

group.xml(一级节点item布局)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="30dp"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/group_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="10dip"
        android:paddingBottom="10dip"
        android:text=""
        />
</LinearLayout>

child.xml(二级节点item)

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:paddingLeft="40dp">

    <TextView
        android:id="@+id/textOne"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="" />
</LinearLayout>

actiivty_main.xml(主界面布局)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.onlyloveyd.expandablelistviewdemo.MainActivity">


    <ExpandableListView
        android:id="@+id/expandable_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:groupIndicator="@drawable/expand"
        android:childIndicator="@drawable/collapse"
        />

</LinearLayout>

2.2 代码

YEAdapter.java(可伸展列表对应的Adapter)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
public class YEAdapter extends BaseExpandableListAdapter {

    //一级节点数据
    private List<GroupItem> mGroupItems;
    private Context mContext;

    public YEAdapter(Context context, List<GroupItem> mData) {
        mGroupItems = mData;
        mContext = context;
    }

    /**
     * 一级节点数量
     * @return
     */
    @Override
    public int getGroupCount() {
        return mGroupItems.size();
    }

    /**
     * 指定位置一级节点下二级节点数量
     * @param groupPosition
     * @return
     */
    @Override
    public int getChildrenCount(int groupPosition) {
        return mGroupItems.get(groupPosition).mChildList.size();
    }

    /**
     * 获取一级节点对象
     * @param groupPosition
     * @return
     */
    @Override
    public Object getGroup(int groupPosition) {
        return mGroupItems.get(groupPosition);
    }

    /**
     * 获取二级节点对象
     * @param groupPosition
     * @param childPosition
     * @return
     */
    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return mGroupItems.get(groupPosition).mChildList.get(childPosition);
    }

    /**
     * 获取一级节点ID，这里用位置值表示
     * @param groupPosition
     * @return
     */
    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    /**
     * 获取二级节点ID，这里用位置值表示
     * @param groupPosition
     * @param childPosition
     * @return
     */
    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    /**
     * ID是否稳定
     * @return
     */
    @Override
    public boolean hasStableIds() {
        return true;
    }

    /**
     * 获取一级节点view
     * @param groupPosition
     * @param isExpanded
     * @param convertView
     * @param parent
     * @return
     */
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        View view=null;
        TextView mTv;
        if(convertView!=null){
            view = convertView;
            mTv = (TextView) view.getTag();
        }else{
            view = View.inflate(mContext,R.layout.group, null);
            mTv = (TextView) view.findViewById(R.id.group_text);
            view.setTag(mTv);
        }
        mTv.setText(mGroupItems.get(groupPosition).title);
        return view;
    }


    /**
     * 获取二级节点View
     * @param groupPosition
     * @param childPosition
     * @param isLastChild
     * @param convertView
     * @param parent
     * @return
     */
    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        View view=null;
        TextView mTextView;
        if(convertView!=null){
            view = convertView;
            mTextView = (TextView) view.getTag();
        }else{
            view = View.inflate(mContext,R.layout.child, null);
            mTextView = (TextView) view.findViewById(R.id.textOne);
            view.setTag(mTextView);
        }
        mTextView.setText(mGroupItems.get(groupPosition).mChildList.get(childPosition).message);
        return view;
    }

    /**
     * 二级菜单是否可选（true为可选，false为不可选，也就是响应和不响应点击事件）
     * @param groupPosition
     * @param childPosition
     * @return
     */
    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

    /**
     * 一级节点对象
     */
    public static class GroupItem {
        String title;
        List<ChildItem> mChildList;
    }

    /**
     * 二级节点对象
     */
    public static class ChildItem {
        String message;
    }
}

具体解释请查阅注释信息

MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        List<YEAdapter.GroupItem> mGroupItems = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            YEAdapter.GroupItem item = new YEAdapter.GroupItem();
            item.title = "this is " + i + "nd group item";
            List<YEAdapter.ChildItem> mChildItems = new ArrayList<>();
            for (int j = 0; j < 4; j++) {
                YEAdapter.ChildItem item1 = new YEAdapter.ChildItem();
                item1.message = "this is " + i + "nd group item's " + j + "nd child";
                mChildItems.add(item1);
            }
            item.mChildList = mChildItems;
            mGroupItems.add(item);
        }


        ExpandableListView expandableListView = (ExpandableListView) this.findViewById(R.id.expandable_list);

        YEAdapter yeAdapter = new YEAdapter(this, mGroupItems);
        expandableListView.setAdapter(yeAdapter);

        expandableListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
                Toast.makeText(MainActivity.this,  groupPosition + "nd group's " + childPosition + "nd Item is clicked!", Toast.LENGTH_SHORT).show();
                return false;
            }
        });

        expandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
                Toast.makeText(MainActivity.this, groupPosition + "nd group is clicked", Toast.LENGTH_SHORT).show();
                return false;
            }
        });

        expandableListView.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {
            @Override
            public void onGroupCollapse(int groupPosition) {
                Toast.makeText(MainActivity.this, "the " + groupPosition + "nd group is collapsed", Toast.LENGTH_SHORT).show();

            }
        });

        expandableListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
            @Override
            public void onGroupExpand(int groupPosition) {
                Toast.makeText(MainActivity.this, "the " + groupPosition + "nd group is expanded", Toast.LENGTH_SHORT).show();

            }
        });
    }
}

2.3 实际效果

这里写图片描述

3. 类结构

3.1 属性值

属性值 含义
groupIndicator 一级节点指示器
indicatorLeft 一级节点指示器距离左边界距离
indicatorRight 一级节点指示器距离右边界距离
childIndicator 意义同group中相同
childIndicatorLeft 意义同group中相同
childIndicatorRight 意义同group中相同
childDivider 设置二级节点的分割想，颜色或者drawable
indicatorStart 同indicatorLeft
indicatorEnd 同indicatorRight
childIndiatorStart 同childIndicatorLeft
childIndicatorEnd 同childIndicatorRight

主要看看分割线效果
设置图片
divider.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@color/colorAccent"/>
    <corners
        android:radius="3dp"/>
</shape>

这里写图片描述

设置颜色
android:childDivider=”@color/colorPrimary”
这里写图片描述

那么一级节点如何设置分割线?
看这个例子

1
2
3
android:childDivider="@color/colorPrimary"
android:divider="@drawable/divider"
android:dividerHeight="2dp"

给一级菜单和二级菜单设置不同的分割线，看下效果

这里写图片描述

二级节点依然显示的时我们设置的分割线，但是当一级节点展开时，展开的节点的一级分割线变成了二级节点的分割线样式，收起后恢复成一级节点的分割线样式。

3.2 常用方法

这里写图片描述

具体内容请查阅源码。

4. 设置上下文菜单

4.1 expandable_menu.xml

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/menu_item1"
        android:title="菜单项1">
    </item>
    <item
        android:id="@+id/menu_item2"
        android:title="菜单项2">
    </item>

</menu>

4.2 onCreateContextMenu

1
2
3
4
5
6
@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
    super.onCreateContextMenu(menu, v, menuInfo);
    menu.setHeaderTitle("expandable menu");
    getMenuInflater().inflate(R.menu.expandable_menu, menu);
}

4.3 onContextItemSelected

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Override
public boolean onContextItemSelected(MenuItem item) {
    // TODO Auto-generated method stub
    super.onContextItemSelected(item);
    switch (item.getItemId()) {
        case R.id.menu_item1:
            Toast.makeText(this, "this is first menu item", Toast.LENGTH_SHORT).show();
            break;
        case R.id.menu_item2:
            Toast.makeText(this, "this is second menu item", Toast.LENGTH_SHORT).show();
            break;
        default:
            break;
    }
    return super.onContextItemSelected(item);
}

4.4 item长按事件显示菜单并注册上下文菜单

1
2
3
4
5
6
7
8
9
10
11
12
expandableListView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
    @Override
    public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
        if (ExpandableListView.getPackedPositionType(id) == ExpandableListView.PACKED_POSITION_TYPE_CHILD)
        {
            expandableListView.showContextMenu();
            return true;
        }
        return false;
    }
});
registerForContextMenu(expandableListView);

5. 备注

程序源码

# 布局控件

喜欢这篇文章？打赏一下作者吧

《Android 基础（四十二）》 MultiDex
《Android 基础（四十)》 FlexboxLayout
关注我

链接

分类

标签云

Aandroid实战 Android Studio Android基础 Android实战 Android开源库 Android源码 Angular CentOS Docker Drawable FileProvider Flutter Fragment Framework Gank.io Gitlab HAL IDEA插件 Kotlin LeetCode Linux MPAndroidChart MacOS Markdown MultiDex Mysql NDK PMDReader Picasso PowerDesign Realm RecyclerView Retrofit RxJava Smali Tomcat WanANdroid WebService Xen allowBackup ionic 动画 四大组件 多线程 局域网 工具 布局控件 应用 开发问题 开机动画 开源 开源库 微信公众号 微信小程序 百度地图 系统源码 自定义View 虚拟化 设计模式 译文 资源 辅助工具 配置

最新文章

归档

标签

Aandroid实战 1
Android Studio 6
Android基础 1
Android实战 27
Android开源库 3
Android源码 1
Angular 1
CentOS 3
Docker 4
Drawable 1
FileProvider 1
Flutter 1
Fragment 4
Framework 9
Gank.io 3
Gitlab 1
HAL 1
IDEA插件 1
Kotlin 6
LeetCode 5
Linux 6
MPAndroidChart 5
MacOS 1
Markdown 1
MultiDex 1
Mysql 2
NDK 1
PMDReader 1
Picasso 1
PowerDesign 1
Realm 8
RecyclerView 1
Retrofit 1
RxJava 3
Smali 2
Tomcat 1
WanANdroid 1
WebService 1
Xen 3
allowBackup 1
ionic 1
动画 3
四大组件 2
多线程 1
局域网 1
工具 1
布局控件 33
应用 7
开发问题 1
开机动画 2
开源 1
开源库 13
微信公众号 1
微信小程序 2
百度地图 4
系统源码 1
自定义View 8
虚拟化 3
设计模式 2
译文 20
资源 1
辅助工具 1
配置 1

最新文章

归档

标签

Aandroid实战 1
Android Studio 6
Android基础 1
Android实战 27
Android开源库 3
Android源码 1
Angular 1
CentOS 3
Docker 4
Drawable 1
FileProvider 1
Flutter 1
Fragment 4
Framework 9
Gank.io 3
Gitlab 1
HAL 1
IDEA插件 1
Kotlin 6
LeetCode 5
Linux 6
MPAndroidChart 5
MacOS 1
Markdown 1
MultiDex 1
Mysql 2
NDK 1
PMDReader 1
Picasso 1
PowerDesign 1
Realm 8
RecyclerView 1
Retrofit 1
RxJava 3
Smali 2
Tomcat 1
WanANdroid 1
WebService 1
Xen 3
allowBackup 1
ionic 1
动画 3
四大组件 2
多线程 1
局域网 1
工具 1
布局控件 33
应用 7
开发问题 1
开机动画 2
开源 1
开源库 13
微信公众号 1
微信小程序 2
百度地图 4
系统源码 1
自定义View 8
虚拟化 3
设计模式 2
译文 20
资源 1
辅助工具 1
配置 1
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×